import {Divider} from "@mui/material";
import AppProvider from "../../sources/AppProvider.ts";
import {useEffect, useState} from "react";
import {useNavigate} from "react-router-dom";
import {ArrowRight} from "@mui/icons-material";
import DGListViewItem from "../../components/DGListViewItem.tsx";
import DGAvatar from "../../components/DGAvatar.tsx";
import DGFooterView from "../../components/DGFooterView/DGFooterView.tsx";
import DGListView from "../../components/DGListView.tsx";
import DGFadeView from "../../components/DGFadeView.tsx";
import ChangeAvatar from "./components/ChangeAvatar.tsx";
import ChangeAccount from "./components/ChangeAccount.tsx";
import ChangeEmail from "./components/ChangeEmail.tsx";
import ChangePassword from "./components/ChangePassword.tsx";
import ChangeName from "./components/ChangeName.tsx";
import ChangeSex from "./components/ChangeSex.tsx";

const DGAccount = () => {
    // 获取全局上下文信息`
    const App = AppProvider.useAppContext();
    // 路由跳转
    const router = useNavigate();
    // 时间提示语
    const [greeting, setGreeting] = useState("");
    // 弹窗状态
    const [ChangeView, setChangeView] = useState("");

    // 打开弹窗 hOCV = handleOpenChangeView
    const hOCV = (result: string) => {
        // 推入历史堆栈
        router("?" + result);
        // 切换页面
        setChangeView(result);
    }

    useEffect(() => {
        if (App) App.setTitle("我的账号");
    }, [App]);


    // 加载返回和后退识别
    useEffect(() => {
        const handlePopState = () => setChangeView("");
        window.addEventListener('popstate', handlePopState);
        return () => window.removeEventListener('popstate', handlePopState);
    }, [ChangeView]);

    useEffect(() => {
        const hour = new Date().getHours();
        if (hour >= 5 && hour < 9) setGreeting('早上好！一年之计在于春，一日之计在于晨，祝你有个充实的早晨！');
        else if (hour >= 9 && hour < 12) setGreeting('上午好！保持专注，今天一定会很有收获！');
        else if (hour >= 12 && hour < 14) setGreeting('中午好！别忘了好好休息一下，补充能量为下午做好准备！');
        else if (hour >= 14 && hour < 17) setGreeting('下午好！坚持不懈，下午的时光也要高效！ ');
        else if (hour >= 17 && hour < 19) setGreeting('傍晚好！忙碌了一天，记得放松一下，享受宁静的时光！');
        else if (hour >= 19 && hour < 23) setGreeting('晚上好！一天接近尾声，放松心情，享受愉快的夜晚！');
        else setGreeting('深夜了，工作和游戏固然重要，但健康更重要，记得注意休息！');
    }, []);


    return (<DGFadeView time={1000}>

        {/* 修改头像组件 */}
        <ChangeAvatar state={ChangeView === "change_avatar"} close={() => setChangeView("")}/>
        {/* 更改昵称组件 */}
        <ChangeName state={ChangeView === "change_name"} close={() => setChangeView("")}/>
        {/* 更改性别组件 */}
        <ChangeSex state={ChangeView === "change_sex"} close={() => setChangeView("")}/>

        {/* 我的账号组件 */}
        <ChangeAccount state={ChangeView === "change_account"} close={() => setChangeView("")}/>
        {/* 更改邮件组件 */}
        <ChangeEmail state={ChangeView === "change_email"} close={() => setChangeView("")}/>
        {/* 密码修改组件 */}
        <ChangePassword state={ChangeView === "change_password"} close={() => setChangeView("")}/>


        {/* 账户信息 */}
        <DGListView
            subTitle={`${App?.info ? App.info['name'] : "访客"}，${greeting}`} NoBackground Margin="15px" gap={20}>

            {/* 头像和昵称相关 */}
            <DGListView title={'账户资料'}>
                {/* 头像 */}
                <DGListViewItem title="头像" rIcon={<ArrowRight/>} onClick={() => hOCV("change_avatar")}>
                    <DGAvatar src=" " bgGrey rounded alt={App!.info ? String(App!.info['name']) : ""} middle/>
                </DGListViewItem>
                <Divider/>
                {/* 昵称 */}
                <DGListViewItem title="昵称" rIcon={<ArrowRight/>} onClick={() => hOCV("change_name")}>
                    {!App!.info && "未登录"}{App!.info && String(App!.info["name"])}
                </DGListViewItem>
                <Divider/>
                {/* 性别 */}
                <DGListViewItem title="性别" rIcon={<ArrowRight/>} onClick={() => hOCV("change_sex")}>
                    {!App!.info && "未登录"}
                    {App!.info && parseInt(String(App!.info["sex"])) === 0 && ""}
                    {App!.info && parseInt(String(App!.info["sex"])) === 1 && "男"}
                    {App!.info && parseInt(String(App!.info["sex"])) === 2 && "女"}
                </DGListViewItem>
            </DGListView>


            {/* 用户账号操作相关 */}
            <DGListView title={'账户操作'}>
                {/* 绑定账号 */}
                <DGListViewItem
                    title="我的账号" rIcon={<ArrowRight/>} onClick={() => hOCV("change_account")}>
                    {!App!.info && "未登录"}{App!.info && String(App!.info["account"])}
                </DGListViewItem>
                <Divider/>
                {/* 绑定邮箱 */}
                <DGListViewItem title="绑定邮箱" rIcon={<ArrowRight/>} onClick={() => hOCV("change_email")}>
                    {!App!.info && "未登录"}{App!.info && String(App!.info["email"])}
                </DGListViewItem>
                <Divider/>
                {/* 修改密码 */}
                <DGListViewItem title="密码修改" rIcon={<ArrowRight/>} onClick={() => hOCV("change_password")}/>
            </DGListView>


            {/*/!* 绑定相关 *!/*/}
            {/*<DGListView title="绑定账号">*/}
            {/*    /!* 手机号码 onClick={() => hOCV("change_phone")} *!/*/}
            {/*    <DGListViewItem title="手机号码" rIcon={<ArrowRight/>}>*/}
            {/*        {!App!.info && "未登录"}*/}
            {/*        {App!.info && (App!.info["bind_phone"] === null ? '未绑定' : String(App!.info["bind_phone"]))}*/}
            {/*    </DGListViewItem>*/}
            {/*    <Divider/>*/}
            {/*    /!* 绑定 QQ onClick={() => hOCV("change_qq")} *!/*/}
            {/*    <DGListViewItem title="绑定 QQ" rIcon={<ArrowRight/>}>*/}
            {/*        {!App!.info && "未登录"}*/}
            {/*        {App!.info && (App!.info["bind_qq"] === null ? '未绑定' : String(App!.info["bind_qq"]))}*/}
            {/*    </DGListViewItem>*/}
            {/*    <Divider/>*/}
            {/*    /!* 绑定微信 onClick={() => hOCV("change_wechat")} *!/*/}
            {/*    <DGListViewItem title="绑定微信" rIcon={<ArrowRight/>}>*/}
            {/*        {!App!.info && "未登录"}*/}
            {/*        {App!.info && (App!.info["bind_wx"] === null ? '未绑定' : String(App!.info["bind_wx"]))}*/}
            {/*    </DGListViewItem>*/}
            {/*</DGListView>*/}


            {/* 账号信息 */}
            <DGListView title="注册信息">
                {/* 注册时间 */}
                <DGListViewItem title="注册时间">
                    {!App!.info && "未登录"}{App!.info && String(App!.info["time"])}
                </DGListViewItem>
                <Divider/>
                {/* 已注册时间 */}
                <DGListViewItem title="已注册时间">
                    {!App!.info && "未登录"}{App!.info && String(App!.info["atime"])}
                </DGListViewItem>
                <Divider/>
                {/* 当前登陆 IP */}
                <DGListViewItem title="IP 地址">
                    {!App!.info && "未登录"}{App!.info && String(App!.info["ip"])}
                </DGListViewItem>
            </DGListView>
        </DGListView>
        {/* 底部信息 */}
        <DGFooterView/>
    </DGFadeView>);
}
export default DGAccount;